<template>
  <div class="app-container home">
    <el-row  type="flex" justify="space-around" class="row-bg">
      <el-card class="box-card cardDiv1">
        <el-col :span="6">
          <SBoxCard type="1"/>
        </el-col>
        <el-col :span="6">
          <SBoxCard type="2"/>
        </el-col>
        <el-col :span="6">
          <SBoxCard type="3"/>
        </el-col>
        <el-col :span="6">
          <SBoxCard type="4"/>
        </el-col>
      </el-card>

    </el-row>
    <el-row type="flex" justify="space-around" class="row-bg" style="margin-bottom:10px">
      <el-col :span="24">
        <el-card class="box-card" style="height: 320px;margin:0 auto;">
          <div id="main1" style="height: 300px;width:100%">
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" class="row-bg" >
      <el-col :span="14" style="margin-right: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单信息</span>
          </div>
          <order-table :dept-id="this.deptId"/>
        </el-card>

      </el-col>
      <el-col :span="10">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span>区块信息</span>
          </div>
          <block-table></block-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import SBoxCard from '@/views/statistics/SBoxCard.vue'
import {orderCountForThirtyDay} from "@/api/statistics/boxCard"
import OrderTable from '@/views/statistics/OrderTable.vue'
import BlockTable from '@/views/statistics/BlockTable.vue'
export default {
  name: "Index",
  components: { BlockTable, OrderTable, SBoxCard },
  data() {
    return {
      deptId: undefined,
      tableData:[]
    };
  },
  created() {
    this.deptId = this.$store.getters.deptId
  },
  mounted() {
    this.queryOrderForThirtyDay()
    this.setbData()
    this.setBireData()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },

    queryOrderForThirtyDay(){
      orderCountForThirtyDay().then(res => {

        let option = {
          title: [{
            text: '近30天交易量',
            textStyle: {
              fontSize: 15
            },

          },
            {
              text: '单位:单',
              left:'80%',
              textStyle:{
                fontSize:13,
                fontWeight:100
              }
            }],
          xAxis: {
            type: 'category',
            data: res.data.keys
          },
          yAxis: {
            type: 'value',
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed'
              }
            }
          },
          series: [
            {
              data: res.data.values,
              type: 'line',
              itemStyle: {
                normal: {
                  color: "#2ec7c9",
                  lineStyle: {
                    color: "rgb(30 198 149)"
                  }
                }
              },
            }
          ]
        };

        this.setLineData(option);
      })
    },

    setLineData(option){
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
    setbData(){

      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#49bafc', '#e9898f', '#f7b230', '#bd92e1', '#26c8aa'],
        title: {
          text: '商品销售额占比',
          left: 'left',
          textStyle: {
            fontSize: 15
          },

        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 1,
          left: 'center',
          data: ['食品', '服装', '家电', '日用品', '原材料']
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: [
              { value: 1548,name: '原材料'},
              { value: 735, name: '日用品'},
              { value: 510, name: '家电' },
              { value: 434, name: '服装' },
              { value: 335, name: '食品' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);

    },
    setBireData(){
      var chartDom = document.getElementById('main3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '订单状态',
          textStyle: {
            fontSize: 15
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,//设置自适应画布大小状态为开，也可通过设置left左移实现相同效果
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine:{
            show:false
          },
          "axisLine":{     //x轴坐标轴
            "show":false
          },
          axisLabel:{
            show: false
          },
          axisTick: {		//x轴刻度线
            show:false
          },
        },
        yAxis: {
          type: 'category', //纵向改成横向柱状图
          data: ['今日取消订单', '今日评价订单','今日退货订单','今日发货订单',  ], //y轴显示文字
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 20,
            showSymbol: false,
            label:{ //柱状图显示数值
              show:true,
              position: 'insideTop', //内部顶部显示
              textStyle: {
                color: '#FFF', //字体颜色
                fontSize: 14 //字体大小
              }
            },
            data: [{
              value:1546,
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 6, 6, 0],
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //1000纵向柱状图渐变色 0100横向柱状图渐变色
                    offset: 0,
                    color: "rgba(30, 198, 149, 1)" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "rgba(30, 198, 149, 1)" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(51, 204, 204, 1)" // 100% 处的颜色
                  }], false)
                }
              },
            },
              {
                value:860,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 6, 6, 0],//顺时针左上，右上，右下，左下）
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: "rgba(170, 137, 254, 1)" // 0% 处的颜色
                    }, {
                      offset: 0.6,
                      color: "rgba(170, 137, 254, 1)" // 60% 处的颜色
                    }, {
                      offset: 1,
                      color: "rgba(204, 153, 204, 1)" // 100% 处的颜色
                    }], false)
                  }
                },

              },
              {
                value:1022,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: "rgba(226, 113, 140, 1)" // 0% 处的颜色
                    }, {
                      offset: 0.6,
                      color: "rgba(244, 174, 149, 1)" // 60% 处的颜色
                    }, {
                      offset: 1,
                      color: "rgba(244, 174, 149, 1)" // 100% 处的颜色
                    }], false)
                  }
                },

              },
              {
                value:1600,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 6, 6, 0],
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                      offset: 0,
                      color: "rgba(255, 153, 51, 1)" // 0% 处的颜色
                    }, {
                      offset: 0.6,
                      color: "rgba(255, 153, 51, 1)" // 60% 处的颜色
                    }, {
                      offset: 1,
                      color: "rgba(239, 203, 45, 1)" // 100% 处的颜色
                    }], false)
                  }
                },
              },

            ]
          },
        ]
      };

      option && myChart.setOption(option);

    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 15px 20px 20px 20px;
  display: flex;
  justify-content: center;
}
.box-div{
  height: 120px;
  padding: 35px;
  margin: 20px;
}
.cardDiv1{
  width: 100%;
  margin-bottom: 10px;
}
.cardDiv2{
  width: 100%;
  margin-bottom: 20px;
}
.app-container {
  padding: 20px;
  background: #eeeeee50;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .webBox{
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .webO{
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }
  .webT{
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: center;
    font-size: 20px;
    font-weight: 700;
    padding-right: 50px;
    padding-top: 10px;
    color: #fff;
  }
  .card1{
    background: linear-gradient(180deg, rgba(30, 198, 149, 1) 0%, rgba(30, 198, 149, 1) 0%, rgba(51, 204, 204, 1) 100%, rgba(51, 204, 204, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card2{
    background: linear-gradient(90deg, rgba(244, 174, 149, 1) 0%, rgba(244, 174, 149, 1) 0%, rgba(226, 113, 140, 1) 100%, rgba(226, 113, 140, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card3{
    background: linear-gradient(180deg, rgba(255, 153, 51, 1) 0%, rgba(255, 153, 51, 1) 0%, rgba(239, 203, 45, 1) 100%, rgba(239, 203, 45, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card4{
    background: linear-gradient(180deg, rgba(45, 169, 250, 1) 0%, rgba(45, 169, 250, 1) 0%, rgba(102, 204, 255, 1) 100%, rgba(102, 204, 255, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
  .card5{
    background: linear-gradient(180deg, rgba(170, 137, 254, 1) 0%, rgba(170, 137, 254, 1) 0%, rgba(204, 153, 204, 1) 100%, rgba(204, 153, 204, 1) 100%);
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  }
}
</style>
